<template>
  <div class="chat-room">
    <eleDrawer v-model="content">
      <template #header="{ close }">
        <div class="head">
          <i class="title">住宿预订平台在线聊天室</i>
          <el-button type="danger" @click="closeChat(close)">
            <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>关闭
          </el-button>
        </div>
      </template>
      <template #content>
        <div class="content">
          <div class="hint" v-show="hint">{{ hint }}</div>
          <div
            :class="`${item.user.id == userInfo.id ? 'MyText' : 'oppositeText'}`"
            v-for="(item, index) in showText"
            :key="index"
          >
            <template v-if="item.user.id == userInfo.id">
              <div class="content">
                <div class="left">
                  <div class="name">{{ item.user.name }}</div>
                  <div class="text">{{ item.data }}</div>
                </div>
                <div class="right"><img .src="item.user.avatar" alt="" /></div>
              </div>
            </template>

            <template v-else>
              <div class="content">
                <div class="left"><img .src="item.user.avatar" alt="" /></div>
                <div class="right">
                  <div class="name">{{ item.user.name }}</div>
                  <div class="text">{{ item.data }}</div>
                </div>
              </div>
            </template>

            <div class="bottom">
              <div class="time">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="foot">
          <div class="input">
            <el-input
              v-model="text"
              :rows="2"
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 3 }"
            ></el-input>
          </div>
          <div class="button">
            <el-button @click="send">发送</el-button>
          </div>
        </div>
      </template>
    </eleDrawer>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref, toRef } from "vue"
import eleDrawer from "../ele-drawer/ele-drawer.vue"
import { localCache } from "@/utils/cacheData"
import { formatDate } from "@/utils/format"
import useChatStore from "@/store/main/chat/chat"
import { storeToRefs } from "pinia"
import { chatWs } from "@/service/websocket/chat.ws"
// import { WsClose, chatWs } from "@/service/websocket/chat.ws"

let accommodationInfo = localCache.getCache("accommodationInfo")
let userInfo = localCache.getCache("userInfo")

const content = ref(false)

const text = ref("")

// const showText = reactive<any[]>([])
const showOppositeText = reactive<any[]>([])

const hint = ref("")

const chatStore = useChatStore()
const { showText } = storeToRefs(chatStore)

function startConnect(res) {
  console.log("监听信息", res)

  if (res.type == "Connect") {
    hint.value = res.message
  }
  if (res.type == "Message") {
    chatStore.setText(res.message)
  }
}
function openConnect() {
  console.log("监听开始")
  chatWs.send({ type: "Connect", clientId: userInfo.id })
}

function send() {
  const textInfo = text.value.trim()
  console.log("textInfo", textInfo)

  if (!textInfo) return

  const time = formatDate(new Date(), true)
  const message = {
    user: {
      id: userInfo.id,
      avatar: userInfo.avatar,
      name: userInfo.name,
      account: userInfo.account
    },
    data: textInfo,
    time
  }

  let target
  if (accommodationInfo.user.id == userInfo.id) {
    // console.log("dfdfdf", showText.value[0].user.id)

    for (let i = 0; i < showText.value.length; i++) {
      const item = showText.value[i]
      if (item.user.id == userInfo.id) continue
      target = item.user.id
    }
    // const currentUserId = showText.value[0].user.id
    // target = currentUserId
  } else {
    target = accommodationInfo.user.id
  }
  chatWs.send({
    type: "Message",
    target,
    message
  })

  chatStore.setText(message)

  text.value = ""
}

function closeChat(close) {
  close()
}

onMounted(() => {
  chatWs.addEventHandler("open", openConnect)
  chatWs.addEventHandler("message", startConnect)
  chatWs.connect()
})

onUnmounted(() => {
  chatWs.removeEventHandler("open", openConnect)
  chatWs.removeEventHandler("message", startConnect)
})

// 用过组件公开实例获取修改属性值
defineExpose({
  content
})
</script>

<style lang="less" scoped>
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 10px 0px;
  border-bottom: 1px solid #ddd;
  .title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.4px;
  }
}
.content {
  .hint {
    text-align: center;
    color: #888;
  }
  .MyText {
    // display: flex;
    // flex-direction: column;
    // justify-content: flex-end;
    margin-top: 20px;
    .content {
      display: flex;
      justify-content: flex-end;
      .left {
        text-align: right;
        .name {
          font-size: 12px;
          color: #888;
          margin-bottom: 4px;
        }
        .text {
          box-sizing: border-box;
          padding: 8px 16px;
          background-color: #95ec69;
          border-radius: 4px;
        }
      }
      .right {
        margin-left: 6px;
        width: 50px;
        height: 50px;
        img {
          width: 100%;
        }
      }
    }

    .bottom {
      text-align: end;
      margin-top: 2px;
      .time {
        font-size: 12px;
        color: #888;
      }
    }
  }

  .oppositeText {
    margin-top: 20px;
    .content {
      display: flex;
      justify-content: flex-start;
      .left {
        margin-right: 6px;
        width: 50px;
        height: 50px;
        img {
          width: 100%;
        }
      }
      .right {
        text-align: left;
        .name {
          font-size: 12px;
          color: #888;
          margin-bottom: 4px;
        }
        .text {
          box-sizing: border-box;
          padding: 8px 16px;
          background-color: #f5f5f5;
          border-radius: 4px;
        }
      }
    }

    .bottom {
      text-align: start;
      margin-top: 2px;
      .time {
        font-size: 12px;
        color: #888;
      }
    }
  }
}
.foot {
  height: 140px;
  background-color: #f5f5f5;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  .input {
    flex: 1;
  }
  .button {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
